<template>
  <div class="common_block_div">
    <div class="">
      <!-- <div class="common_title pad_b20">菜单管理</div> -->
      <div class="common_button flex_ac">
        <div class="right_button margin_a flex">
          <a href="javascript:;" class="color_blue " @click="handleUpdate"  v-if="have_auth('/system/menu/add')">新增</a>
        </div>
      </div>
    </div>
    <div class="">
      <el-table v-loading="loading" :data="list" row-key="id"
      :tree-props="{children: 'children', hasChildren: 'hasChildren'}" >
        <el-table-column label="菜单名称" align="left" prop="menu_name"  />
        <el-table-column label="图标">
            <template v-slot="scope">
              <img :src="scope.row.menu_icon" v-if="scope.row.menu_icon" alt="" style="height: 30px; background:#293449">
            </template>
        </el-table-column>
        <el-table-column label="类型">
            <template v-slot="scope">
              {{scope.row.menu_type_text}}
            </template>
        </el-table-column>
        <el-table-column label="地址" align="center" prop="menu_url"  />
        <el-table-column label="显示顺序" align="center" prop="sort_order"  />
        <!-- <el-table-column label="状态" align="center" prop="status_text"  /> -->
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120px" fixed="right">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="handleUpdate(scope.row)"   v-if="have_auth('/system/menu/edit')">编辑</el-button>
            <el-button type="text" size="small" @click="handleDelete(scope.row)"  v-if="have_auth('/system/menu/del')">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.limit"
        @pagination="getList"
      />
    </div>

  </div>
</template>

<script>

export default {
  name: 'menuindex',
  data () {
    return {
      // 列表模板
      loading: false,
      // 查询参数
      queryParams: {

      },
      total:0,
      list:[],
      type_texts:{
          '1':'菜单',
          '2':'导航',
          '3':'按钮'
      }
    }
  },
  created() {
    this.getList();
  },
  methods:{

    /** 修改按钮操作 */
    handleUpdate(row) {
      this.$router.push('/system/addmenu?id='+(row.id || ''))
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const _this=this;
      const ids =row.id;
      this.$confirm('是否确认删除?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          _this.axios.post("/manage/admin.Menu/delete", {id:ids}).then((res) => {
              if (res) {
                  _this.getList();
                  _this.$message.success('操作成功');
              }
          }).catch((err) => {
              console.log(err);
          });
        })
    },
    /** 查询列表 */
    getList() {
        this.loading = true;
        this.axios.get("/manage/admin.Menu/index", this.queryParams).then((res) => {
            if (res) {
                this.loading = false;
                this.list = res.message;
            }
            this.loading = false;
        }).catch((err) => {
            console.log(err);
            this.loading = false;
        });
    },
    /** 搜索按钮操作 */
    handleQuery() {
        this.queryParams.page = 1;
        this.getList();
    }

  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .title{line-height: 44px; font-size: 20px;}
</style>
